<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <!-- <link rel="stylesheet" href="../style/css/productlist.css"> -->
    <link rel="stylesheet" href="css/productlist.css">
    <link rel="stylesheet" href="assets/iconfont/iconfont.css">
</head>

<body>
    <header class="indexHead">
        <div class="layout">
            <ol class="headnavlef">
                <li><a href="#">首页</a></li>
                <li><a href="http://huawei.com">华为官网</a></li>
                <li><a href="#">花粉俱乐部</a></li>
                <li><a href="#">V码(优购玛)</a></li>
                <li><a href="#">企业购</a></li>
                <li><a href="#">Select</a></li>
                <li><a href="#">更多精彩</a></li>
            </ol>
            <ul id="indexHeadul">
                <li id="token"><a href="login.html">请登录&nbsp;注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">客户服务 <span></span></a></li>
                <li><a href="#">网站导航<span></span></a></li>
                <li><a href="#">手机版<span></span></a></li>
                <li><a href="ShoppingCart.html"> <i class="iconfont icon-gouwuche"></i> <i>购物车</i>
                        <i class="carnum">0</i></a></li>
            </ul>
        </div>
    </header>
    <div class="indexnav">
        <div class="indexnavmain">
            <div class="indexnavlef">
                <a href="index.html"><img src="assets/images/index/logo.png" alt="" class="indexlogo"></a>
                <ul>
                    <li><a href="#" class="huawei"><img src="assets/images/index/huawei.png" alt=""></a></li>
                    <li>莫塞尔专区</li>
                    <li>华为智慧屏</li>
                    <li>智能家居</li>
                    <li>NOVA8系列</li>
                </ul>
            </div>
            <div class="indexnavrig">
                <input type="text" placeholder="Mate x2">
                <span class="iconfont icon-sousuo1"></span>
            </div>

        </div>
    </div>
    <div class="prolisttit">
        <a href="index.html">首页</a> 〉&nbsp;&nbsp;<span>手机</span>
    </div>
    <div class="listheader">
        <div class="listheader1">
           <div class="p-title">分类：</div>
           <div class="p-value">手机</div>
        </div>
        <div class="listheader2">
            <div class="p-title">服务优惠：</div>
            <div class="p-value">
                <ul>
                    <li><a href="">仅看有货</a> </li>
                    <li><a href="">分期免息</a> </li>
                    <li><a href="">优惠商品</a> </li>
                </ul>
            </div>
        </div>
        <div class="listheader3">
            <div class="p-title">屏幕尺寸：</div>
            <div class="p-value">
                <ul>
                    <li><a href="">6.0-6.5英寸</a> </li>
                    <li><a href="">6.5英寸以上</a> </li>
                    
                </ul>
            </div>
        </div>
        <div class="listheader4">
            <div class="p-title">更多选项</div>
            <div class="p-value">
                <ul>
                    <li><a href="">运行内存</a> </li>
                    <li><a href="">存储容量</a> </li>
                    <li><a href="">上市时间</a> </li>
                </ul>
            </div>
        </div>
        <div class="listheader5">
            <div class="p-title">排序</div>
            <div class="p-value">
                <ul class="select-new">
                    <li><a href="">综合</a> </li>
                    <li><a href="">最新</a> </li>
                    <li><a href="">评论数</a> </li>
                    <li>
                        <a href="">价格</a> 
                        
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="phonelist">

    </div>

    <flowdown>
        <div id="flowdown">
            <p>
                <img src="assets/images/footlogo.png" alt="">
            </p>
            <p>
                <ul>
                    <li>隐私声明 服务协议 COOKIES Copyright © 2012-2021 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号</li>
                    <li>增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</li>
                </ul>
            </p>
        </div>
    </flowdown>


    
    <script type="module">
        import GoodsItem from "./js/Goodsitem.js";

        var list = [
            {
                id: 1001,
                colors: [
                      { ids: 100101, src:" assets/images/mate40E.png", price: 4899 ,href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
                
            }, {
                id: 1002,
                colors: [
                   
                    { ids: 100204, src: "assets/images/nova8.png", href: "http://localhost:7777/Productdetails.html", price: 999 }
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1003,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1004,
                colors: [
                    { ids: 100101, src:" assets/images/matex2.png", price: 2899, href: "http://localhost:7777/Productdetails.html" }
                    

                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1008,
                colors: [
                    { ids: 100801, src: " assets/images/matex2.png", price: 699, href: "http://localhost:7777/Productdetails.html" }
                    
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1005,
                colors: [
                    { ids: 100501, src:" assets/images/matex2.png", price: "2599", href:"http://localhost:7777/Productdetails.html" },
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1080,
                colors: [
                    { ids: 108001, href:"http://localhost:7777/Productdetails.html", src: " assets/images/matex2.png", price: 1999 },
                    
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            },  {
                id: 1001,
                colors: [
                      { ids: 100101, src:" assets/images/mate40E.png", price: 4899 ,href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
                
            }, {
                id: 1002,
                colors: [
                   
                    { ids: 100204, src: "assets/images/nova8.png", href: "http://localhost:7777/Productdetails.html", price: 999 }
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1003,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            },  {
                id: 1001,
                colors: [
                      { ids: 100101, src:" assets/images/mate40E.png", price: 4899 ,href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
                
            }, {
                id: 1002,
                colors: [
                   
                    { ids: 100204, src: "assets/images/nova8.png", href: "http://localhost:7777/Productdetails.html", price: 999 }
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1003,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            },  {
                id: 1001,
                colors: [
                      { ids: 100101, src:" assets/images/mate40E.png", price: 4899 ,href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
                
            }, {
                id: 1002,
                colors: [
                   
                    { ids: 100204, src: "assets/images/nova8.png", href: "http://localhost:7777/Productdetails.html", price: 999 }
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1003,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            },  {
                id: 1001,
                colors: [
                      { ids: 100101, src:" assets/images/mate40E.png", price: 4899 ,href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
                
            }, {
                id: 1002,
                colors: [
                   
                    { ids: 100204, src: "assets/images/nova8.png", href: "http://localhost:7777/Productdetails.html", price: 999 }
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }, {
                id: 1003,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            },{
                id: 1004,
                colors: [
                    { ids: 100301, src: "assets/images/matex2.png", price: 1099, href: "http://localhost:7777/Productdetails.html" }
                   
                ],
                jpPhone: true,
                title: 'HUAWEI Mate 40E',
                appraise: 113739,
                shop: { name: "赠送积分", href: "http://localhost:7777/Productdetails.html" }
            }

        ]


        list.forEach((item) => {
            var goods = new GoodsItem(item);
            goods.appendTo(".phonelist");
        });
    </script>
   
       
     
     
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://www.jq22.com/demo/EasyLazyload20161225/dist/EasyLazyload.min.js"></script>
    <script>

        lazyLoadInit({
          coverColor: "white",
          coverDiv: "<h1>加载中...</h1>",
          offsetBottom: 0,
          offsetTopm: 0,
          showTime: 600
        });
    
    
      </script>
    <!-- <script src="../src/productlist.js"></script> -->
</body>

</html>